<!doctype html>
<html lang="en">

<%@ include file="Include_Professor_Imports.jsp"%>

<script>
function resetMC(){
	document.getElementById('txtAddChoice').value = "";
	document.getElementById('txtMcQuestion').value = "";
	document.getElementById('txtMcCategory').value = "";
	document.getElementById('mcmulitplechoice').options.length = 0; 
	alert('Successful Reset of New Multiply Choice Question Form');
}
function resetTF(){
	document.getElementById('txtTfQuestion').value = "";
	document.getElementById('txtTfCategory').value = "";
	document.getElementById('selectTfAnswer').selectedIndex = 0;
	alert('Successful Reset of New True or False Question Form');
}

function addChoices(){
	var valueOfChoice = document.getElementById('txtAddChoice');

	if(valueOfChoice.value == '' || valueOfChoice.value.indexOf('\\') !== -1 || valueOfChoice.value.indexOf('\'') !== -1 || valueOfChoice.value.indexOf('\"') !== -1){
		alert('Please enter a valid Choice.');
	}else{
		var selectObj = document.getElementById('mcmulitplechoice');
		var anOption = document.createElement("OPTION");
		selectObj.options.add(anOption);
		anOption.innerText = document.getElementById('txtAddChoice').value;
		anOption.Value = document.getElementById('txtAddChoice').value;
		
		alert(anOption);
		
		var choices = document.getElementById('choices');
		var stringChoices = choices.value;
		if(stringChoices == ""){
			stringChoices += ""+document.getElementById('txtAddChoice').value;
		}else{
			stringChoices += ","+document.getElementById('txtAddChoice').value;
		}
		choices.value = stringChoices;
		
		document.getElementById('txtAddChoice').value = "";
	}
}
function checkFormTF()
{
	var valueOfChoice = document.getElementById("txtTfQuestion");
	var tfCategory = document.getElementById("txtTfCategory");
	var intExp = /^\d+$/;	
	var floatExp = /^[-+]?[0-9]+(\.[0-9]+)?$/;

	if (valueOfChoice.value == '' || valueOfChoice.value.indexOf('\\') !== -1 || valueOfChoice.value.indexOf('\'') !== -1 || valueOfChoice.value.indexOf('\"') !== -1)
	{
		alert('Please enter a valid Question.');
		return false;
	} 
	if (tfCategory.value == '' || tfCategory.value.indexOf('\\') !== -1 || tfCategory.value.indexOf('\'') !== -1 || tfCategory.value.indexOf('\"') !== -1)
	{
		alert('Please enter a valid Question Category.');
		return false;
	} 
	return true;
}

function checkFormMC()
{
	var mcQuestion = document.getElementById("txtMcQuestion");
	var mcCategory = document.getElementById("txtMcCategory");
	var mcAnswer = document.getElementById("mcmulitplechoice");
	var intExp = /^\d+$/;	
	var floatExp = /^[-+]?[0-9]+(\.[0-9]+)?$/;

	if (mcQuestion.value == '' || mcQuestion.value.indexOf('\\') !== -1 || mcQuestion.value.indexOf('\'') !== -1 || mcQuestion.value.indexOf('\"') !== -1)
	{
		alert('Please enter a valid Question.');
		return false;
	} 
	if (mcCategory.value == '' || mcCategory.value.indexOf('\\') !== -1 || mcCategory.value.indexOf('\'') !== -1 || mcCategory.value.indexOf('\"') !== -1)
	{
		alert('Please enter a valid Question Category.');
		return false;
	} 
	if (mcAnswer.value == '' || mcAnswer.value.indexOf('\\') !== -1 || mcAnswer.value.indexOf('\'') !== -1 || mcAnswer.value.indexOf('\"') !== -1)
	{
		alert('Please enter a valid Answer.');
		return false;
	} 

	return true;
}


</script>

<body>
<!-- HEADER -->
<div style="position: fixed; width: 100%; z-index: 1;">
<%@ include file="Include_Professor_Header.jsp"%>
<%@ include file="Include_Design_Table.jsp"%> 

<section id="secondary_bar">
<div class="user"><!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container"><article class="breadcrumbs"><a
	href="ProfessorHomeServlet">Home</a>
<div class="breadcrumb_divider"></div>
<a class="current">Create Live Exam</a></article></div>
</section>
<!-- end of secondary bar -->
</div>
<%@ include file="Include_Professor_Menu.jsp"%>
<c:set var="questions" value="${requestScope.questions }"></c:set>

<section id="main" class="column">

<%@ include file="Include_Professor_Message.jsp"%>


	<div class="tablemodule" style="max-height: 400px; overflow: auto;">
	<h5>Questions <div>Search: <input name="filt" onKeyUp="filter2(this, 'tableQuestions', '1')" type="text"></div></h5>
		<table id="tableQuestions" class="tablesorter" cellspacing="0">
			<thead>
				<tr>
					<th>ID</th>
					<th>Question</th>
					<th>Category</th>
					<th>Type</th>
					<th>Answer</th>
					<th>Choices</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${questions}" var="questionObj">
				<tr>
					<td> <c:out value="${questionObj.questionID }"/> </td>
					<td> <c:out value="${questionObj.question }"/> </td>
					<td> <c:out value="${questionObj.category }"/> </td>
					<td>
						<c:choose>
							<c:when test="${questionObj.getClass().getSimpleName() eq 'MultipleChoice'}">
								Multiple Choice
							</c:when>
							<c:otherwise>
								True or False
							</c:otherwise>
						</c:choose>
					</td>
					<td> <c:out value="${questionObj.answer }"/> </td>
					<td>
						<c:forEach items="${questionObj.choices}" var="choices" varStatus="i" >
						
							<c:choose>
								<c:when test="${questions.size() eq i.count}">
									<c:out value="${ choices }" />
								</c:when>
								<c:otherwise>
									<c:out value="${choices}," />
								</c:otherwise>
							</c:choose>
													
						</c:forEach>
					</td>
				</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>

<article class="module width_full">
	<form action="ProfessorAddQuestionServlet" method="post">
	<input type="hidden" name="questionType" value="TF">
	<header>
		<h3>New True or False Question Form</h3>
	</header>
	<div class="module_content">
	
		<div id="trueorfalsediv">
				<fieldset>
					<label>Question</label> <textarea id="txtTfQuestion" name="questionTxt" style="height: 300px;"></textarea>
				</fieldset>
				<div class="clear"></div>
				<fieldset style="margin-top: 20px;">
					<label>Category</label> 
					<input type="text" id="txtTfCategory" name="questionCategory">
				</fieldset>
				<fieldset style="width: 48%; float: left;">
					<label>Answer</label>
					<select style="width: 92%;" id="selectTfAnswer" name="questionCorrect">
						<option value="True">True</option>
						<option value="False">False</option>
					</select>
				</fieldset>
			<div class="clear"></div>
		</div>
	
	
	<div class="spacer"></div>
	<div class="clear"></div>
	
	</div>
	<footer>
	<div class="submit_link">
		<input type="submit" value="Add Question" class="alt_btn" onclick="return checkFormTF()"> 
		<input type="button" onclick="resetTF()" value="Reset"></div>
	</footer>
	</form>
</article>
<!-- end of post new article -->

<article class="module width_full">
	<form action="ProfessorAddQuestionServlet" method="post">
	<input type="hidden" name="questionType" value="MC">
	<header>
		<h3>New Multiple Choice Question Form</h3>
	</header>
	<div class="module_content">
	
	<div id="multiplechoicediv">

	<fieldset>
		<label>Question</label> 
		<textarea id="txtMcQuestion" name="questionTxt" style="height: 300px;"></textarea>
	</fieldset>
	<div class="clear"></div>
	<fieldset style="margin-top: 20px;">
		<label>Category</label> 
		<input type="text" id="txtMcCategory" name="questionCategory">
	</fieldset>
	<fieldset style="width: 48%; float: left; margin-right: 3%;">
		<label>Answer</label> 
		<select style="width:92%;" id="mcmulitplechoice" name="questionCorrect">
		</select>
	</fieldset>
	<fieldset style="width: 48%; float: left;">
		<label>Add a choice</label> 
		<input type="text" style="width: 92%;" id="txtAddChoice" >
	</fieldset>
	<input type="hidden" id="choices" name="questionChoices">
	<div class="clear"></div>
	<input type="button" value="Add Choice" style="position: relative; left: 500px;" onclick="addChoices()"/></div>
	
	<div class="spacer"></div>
	<div class="clear"></div>
	
	</div>
	<footer>
	<div class="submit_link">
		<input type="submit" value="Add Question" class="alt_btn" onclick="return checkFormMC()"> 
		<input type="button" onclick="resetMC()" value="Reset"></div>
	</footer>
	</form>
</article>

<div class="spacer"></div>
</section>


</body>

</html>